import React, { useEffect, useRef, useState } from 'react'
import "./list.scss"
import { NavBar } from 'antd-mobile'
import { getList } from '../../request'
import { InfiniteScroll } from 'antd-mobile'
import { Link } from 'react-router-dom'
function List() {
    const [list, setList] = useState([])
    useEffect(() => {
        getList().then(res => {
            console.log(333, res)
            setList(res.data.data)
        })
    }, [])

    const [data, setData] = useState([])
    const [hasMore, setHasMore] = useState(true)
    const count = useRef(1)
    const size = 5
    async function loadMore() {
        if (list.length) {
            // const append = list.slice((count.current - 1) * size, count.current * size)
            const append = list.slice((count.current - 1) * size, count.current * size)
            setData(val => [...val, ...append])
            setHasMore(append.length > 0)
            count.current++
        }
    }
    return (
        <div className='list-box'>
            <div className='nav'>
                <NavBar>北京到上海 07-28</NavBar>
            </div>
            <div className='list'>
                {
                    data.map((item, index) => {
                        return (
                            <Link to={`/Detail/${item.id}`}>
                                <div className='item' key={index}>
                                    <div className='item-info'>
                                        <b>{item.flightCom}</b>
                                        <div className='addr-price'>
                                            <span className='addr'>{item.startTime}</span>
                                            <span className='price'>{item.endTime}</span>
                                        </div>
                                        <div className='addr-price'>
                                            <span className='addr'>{item.startAirport}</span>
                                            <span className='price'>{item.endAirport}</span>
                                        </div>
                                    </div>
                                </div>
                            </Link>
                        )
                    })
                }
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </div>
        </div>
    )
}

export default List
